<template>
  <div class="hello">
    <kp-checkbox-list
      ref=""
      @kpChange="change"
      @click="click"
      :first="first"
      v-model="checkbox"
    >
    </kp-checkbox-list>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { KpCheckboxList } from "keep-ui-vue";
export default defineComponent({
  name: "KpCheckboxListDemo",
  components: {
    KpCheckboxList,
  },
  data() {
    return {
      checkbox: "2323",
      first: "34r",
    };
  },
  setup(props, ctx) {
    console.log(props, ctx);
  },
  methods: {
    change(e: any) {
      console.log("change", e);
    },
    click() {
      console.log("click");
    },
  },
  created() {
    setTimeout(() => {
      this.first = "oihjkbkj";
      this.checkbox = "232kgjfj";
    }, 3000);
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
